import * as React from 'react'
import { Link, useParams } from 'react-router-dom'
import { Form, Breadcrumb, message } from 'antd'
import style from './style.module.css'
import { ICompany } from '../../types'
import * as api from '../../services/api'
import { toFontCompanySize, toFontFinanceStage, toFontStatus } from '../util'

interface Params {
  id: string
}

export default function View() {
  const [company, setCompany] = React.useState<ICompany>()
  const id = useParams<Params>().id
  React.useEffect(() => {
    const getData = async () => {
      const result = await api.company(id)
      if (result.stat === 'OK') {
        setCompany(result.result)
      } else {
        message.error(result.message)
      }
    }
    getData()
  }, [id])

  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
  }
  return (
    <>
      <Breadcrumb>
        <Breadcrumb.Item>
          <Link to='/home/company'>我的企业</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>查看详情</Breadcrumb.Item>
      </Breadcrumb>
      <Form {...layout} id={style.view} labelAlign="left">
        <Form.Item label="企业logo">
          <img src={company?.logo} alt='' />
        </Form.Item>
        <Form.Item label="企业简称">{company?.companyShortName}</Form.Item>
        <Form.Item label="企业名称">{company?.companyFullName}</Form.Item>
        <Form.Item label="企业类型">{company?.industryField}</Form.Item>
        <Form.Item label="企业规模">{toFontCompanySize(company?.companySize)}</Form.Item>
        <Form.Item label="创建时间">{company?.time}</Form.Item>
        <Form.Item label="更新时间">{company?.updateAt}</Form.Item>
        <Form.Item label="发布状态">{toFontStatus(company?.isDisabled)}</Form.Item>
        <Form.Item label="融资情况">{toFontFinanceStage(company?.financeStage)}</Form.Item>
        <Form.Item label="企业描述">{company?.describe}</Form.Item>
      </Form>
    </>
  )
}
